Login Branding
This package implements a new login page for Qore applications and provides
full support for the qore\sso
plugin.
Users with the ability to manage the application settings are able to create blueprints for the login page. Administrators will be able to:
- Upload a background image
- Edit the background image (Add text, apply filters)
- Select the position of the login form (left, center, right)
- Select a period to show a login blueprint (for example the Christmas or Easter period)
Installation
You can install the package via composer:
composer require qore/login-branding
Laravel
php artisan vendor:publish --tag=qore.login-branding.config
php artisan vendor:publish --tag=qore.login-branding.db
1. Migrate
Make sure to migrate.
2. Resources
This package comes with the LoginBlueprintResource
.
The resource could be implemented in the settings menu in the GlobalsController
.
private function menu(): Menu
{
...
if (plugin_is_active('qore/login-branding')) {
$group->addResourceMenuItem(resource(LoginBlueprintResource::class));
}
...
}
Frontend
1. Publish Components
Frontend components should be published. To publish the frontend components:
php artisan vendor:publish --tag=qore.login-branding.frontend
2. Registering Pages
This package comes with two Login pages:
Login.vue
and LoginSocial.vue
.
The latter is used for OAuth redirects if the qore/sso
plugin is implemented in your application.
In your frontend/src/router/routes.js
add the published vue file(s) as a child to the guest middleware and replace the old login:
...middleware('guest', [
{
path: '/',
component: () => import('layouts/AuthLayout.vue'),
children: [
/* The new page */
{
path: 'login',
component: () => import('vendor/login-branding/pages/auth/Login.vue'),
name: 'login'
},
/* The SSO redirect page */
{
path: 'login-social/:provider/callback',
component: () => import('vendor/login-branding/pages/auth/LoginSocial.vue'),
name: 'login-social'
},
],
}
]
3. Yarn dependency
This plugin requires additional yarn dependencies, to install them:
yarn add image-conversion
4. Fontawesome setup
Fontawesome v6 is used to display OAuth company logo's if qore\sso
is used.
See Quasar docs on how to install fontawesome v6
5. Register locales
The following locales should manually be added to the local files of your application.
{
"Login to {app}": "Login to {app}",
"Logging you in": "Logging you in"
}
Configuring
Config
brand_image_url
: public path to company logo.
This path should be publicly accessible.
Usage
Public routes
api/login/data
:
The login page uses this route to fetch information about the current active blueprint.
Return example :
{
'position': 'left', // 'left'|'center'|'right'
'background_image_url': 'http://localhost:8000/storage/login/bg1.png',
'brand_image_url': 'http://localhost:8000/storage/login/company_logo.png'
}
Defaults to the primary color as background and the login form positioned on the right.
Upgrade guide
composer update qore/login-branding
If updates to migrations or Vue components are needed:
php artisan vendor:publish --tag=qore.login-branding.db --force
php artisan vendor:publish --tag=qore.login-branding.frontend --force
Release notes
0.1.0 Initial release
0.1.1
- Small bug fixes and improvements.
0.1.2
- Code cleanup.
- Added locales
Due to the qore extension lifecycle the plugin cannot register locales. The following locales need to be manually added:
{
"Login to {app}": "Login to {app}",
"Logging you in": "Logging you in"
}